<template>
  <div id="dialogpackage">
    <el-form :model="serviceInfoData" :rules="serviceInfoRules" ref="serviceInfoDataForm" label-width="115px">
      <el-row>
        <el-col :span="11">
          <el-form-item label="服务类型" prop="service_type_title">
            <el-select v-model="serviceInfoData.service_type_id" style="width:100%">
              <el-option v-for="(item,index) in service_type_data" :key="index" :label="item.service_type_title"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费方式" prop="billing_method_name">
            <el-select v-model="serviceInfoData.billing_method_id" style="width:100%">
              <el-option v-for="(item,index) in billing_method_data" :key="index" :label="item.billing_method_name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="计费项" prop="billing_items_title">
            <el-select v-model="serviceInfoData.billing_items_id" style="width:100%">
              <el-option v-for="(item,index) in account_type_data" :key="index" :label="item.billing_items_title"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="次数" prop="frequency"
                        v-if="serviceInfoData.billing_method_id==='A1231AB8C12E4CD3AFA7A3F35D8FEFB7'">
            <el-input-number v-model="serviceInfoData.frequency" :controls='false'
                             style="width: 100%;"></el-input-number>
          </el-form-item>
          <el-form-item label="天数" prop="frequency" v-else>
            <el-input-number v-model="serviceInfoData.frequency" :controls='false'
                             style="width: 100%;"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="原价" prop="original_price">
            <el-input-number v-model="serviceInfoData.original_price" :controls='false'
                             style="width: 100%;"></el-input-number>
          </el-form-item>
          <el-form-item label="折扣" prop="service_item_discount">
            <el-input v-model="serviceInfoData.service_item_discount" :disabled="true" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="现价" prop="current_price">
            <el-input-number v-model="serviceInfoData.current_price" :controls='false'
                             style="width: 100%;"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="服务项描述" prop="service_item_description">
            <el-input type="textarea" v-model="serviceInfoData.service_item_description" placeholder="(20-120字)"
                      style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="备注" prop="memo">
            <el-input type="textarea" v-model="serviceInfoData.memo" placeholder="(20-120字)"
                      style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btn-box">
      <el-button type="info" size="large" @click="submitForm('serviceInfoDataForm')">保存</el-button>
      <el-button type="info" size="large" @click="cancelInfoEdit()">取消</el-button>
    </div>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'

  export default {
    name: 'dialogpackage',
    props: ['Dataid', 'Savetype'],
    data () {
      var changePrice = (rule, value, callback) => {
        if (this.serviceInfoData.current_price === 0) {
          callback(new Error('价格不能为空'))
        } else if (this.serviceInfoData.original_price < this.serviceInfoData.current_price) {
          callback(new Error('现价不能高于原价'))
        } else {
          this.test = Math.round(this.serviceInfoData.current_price / this.serviceInfoData.original_price * 10000) / 100.00
          this.serviceInfoData.service_item_discount = this.test + '%'
          callback()
        }
        callback()
      }
      var checkFrequency = (rule, value, callback) => {
        if (this.serviceInfoData.frequency === 0) {
          callback(new Error('天数/次数不能为空'))
        }
        callback()
      }
      var checkOriginal = (rule, value, callback) => {
        if (this.serviceInfoData.original_price === 0) {
          callback(new Error('价格不能为空'))
        }
        callback()
      }
      var checkService = (rule, value, callback) => {
        if (this.serviceInfoData.service_type_id === '') {
          callback(new Error('请选择服务类型'))
        }
        if (this.serviceInfoData.billing_method_id === '') {
          callback(new Error('请选择计费类型'))
        }
        if (this.serviceInfoData.billing_items_id === '') {
          callback(new Error('请选择计费方式'))
        }
        callback()
      }
      return {
        test: 0,
        servicekey: '',
        service_type_data: [],
        billing_method_data: [],
        account_type_data: [],
        serviceInfoData: {
          service_type_id: '',
          billing_items_id: '',
          billing_method_id: '',
          billing_method_type: '',
          billing_items_title: '',
          service_type_title: '',
          frequency: '',
          current_price: '',
          original_price: '',
          service_item_discount: '',
          service_item_description: '',
          memo: '',
        },
        serviceInfoRules: {
          service_type_title: [
            {required: true, validator: checkService, trigger: 'blur'}
          ],
          billing_items_title: [
            {required: true, validator: checkService, trigger: 'blur'}
          ],
          billing_method_name: [
            {required: true, validator: checkService, trigger: 'blur'}
          ],
          frequency: [
            {required: true, validator: checkFrequency, trigger: 'blur'}
          ],
          original_price: [
            {required: true, validator: checkOriginal, trigger: 'blur'},
          ],
          current_price: [
            {required: true, validator: changePrice, trigger: 'blur'},
          ],
          // service_item_discount:[
          // 	{
          // 		type:'data',trigger:'blur'
          // 	}
          // ],
        },
        isDialog: false,
        page_no: 0
      }
    },
    created () {
      this.getServiceType()
      this.getBillingMethod()
      this.getAccountType()
      if (this.Savetype === 'add') {
        this.servicekey = 'STALLS_SERVICE_ITEM_ADD'
      } else if (this.Savetype === 'edit') {
        this.servicekey = 'STALLS_SERVICE_ITEM_EDIT'
        this.getServiceDataDetial(this.Dataid)
      }
    },
    methods: {
      getServiceType () {
        let _this = this
        let param = new Object()
        postDataToServer('PACKAGE_SERVICE_TYPE_LIST', param).then((data) => {
          _this.service_type_data = data.data_list
        })
      },
      getBillingMethod () {
        let _this = this
        let param = new Object()
        postDataToServer('STALLS_BILLING_METHOD_LIST', param).then((data) => {
          _this.billing_method_data = data.data_list
        })
      },
      getAccountType () {
        let _this = this
        let param = new Object()
        postDataToServer('STALLS_BILLING_ITEMS_LIST', param).then((data) => {
          _this.account_type_data = data.data_list
        })
      },
      getServiceDataDetial (parameter) {
        let _this = this
        let param = new Object()
        param.id = parameter
        postDataToServer('STALLS_SERVICE_ITEM_GET', param).then((data) => {
          if (data.status === 0) {
            _this.serviceInfoData = data.data_list
            _this.serviceInfoData.service_item_discount = data.data_list.service_item_discount + '%'
          }
        })
      },
      //保存
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveServiceInfoData()
          } else {
            this.$message('数据格式有误！')
            return false
          }
        })
      },
      saveServiceInfoData () {
        let _this = this
        let params = new Object()
        if (_this.servicekey === 'STALLS_SERVICE_ITEM_EDIT') {
          params.id = _this.Dataid
        }
        //表单数据
        params.service_type_id = _this.serviceInfoData.service_type_id
        params.billing_items_id = _this.serviceInfoData.billing_items_id
        params.billing_method_id = _this.serviceInfoData.billing_method_id
        params.service_item_description = _this.serviceInfoData.service_item_description
        params.frequency = _this.serviceInfoData.frequency
        params.current_price = _this.serviceInfoData.current_price
        params.original_price = _this.serviceInfoData.original_price
        params.service_item_discount = _this.test
        params.memo = _this.serviceInfoData.memo
        postDataToServer(_this.servicekey, params).then((data) => {
          if (data.status === 0) {
            if (_this.servicekey === 'STALLS_SERVICE_ITEM_EDIT') {
              _this.$message.success('编辑成功!')
            } else {
              _this.$message.success('保存成功')
            }
            _this.$emit('returnBack', false)
            for (let key in this.serviceInfoData) {
              this.serviceInfoData[key] = ''
            }
          } else {
            _this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      //取消
      cancelInfoEdit () {
        this.$emit('returnBack', false)
        for (let key in this.serviceInfoData) {
          this.serviceInfoData[key] = ''
        }
      }
    },
    watch: {
      Savetype (val, oldVal) {
        if (this.Savetype === 'add') {
          this.servicekey = 'STALLS_SERVICE_ITEM_ADD'
          for (let key in this.serviceInfoData) {
            this.serviceInfoData[key] = ''
          }
        } else if (this.Savetype === 'edit') {
          this.servicekey = 'STALLS_SERVICE_ITEM_EDIT'
          this.getServiceDataDetial(this.Dataid)
        }
      },
      Dataid (val, oldVal) {
        this.getServiceDataDetial(val)
      }
    }
  }
</script>
<style scoped>
  .btn-box {
    text-align: center;
  }
</style>

